<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100px;
      padding: 20px;
      border: 2px solid #333;
      border-radius: 5px;
      margin: 50px auto;
    }

    hr {
      margin: 10px 0;
    }
  </style>
</head>
<body>


  <div class="box">
    <input type="checkbox"> 全选
    <hr>
    <input class="item" type="checkbox"> 选项一 <br>
    <input class="item" type="checkbox"> 选项二 <br>
    <input class="item" type="checkbox"> 选项三 <br>
    <input class="item" type="checkbox"> 选项四 <br>
  </div>
<!-- 
    1.获取元素   1个实全选     所有的选项  
    2.判断全选按钮的状态  然后挨个给到 所有的选项   
    3.所有的选项 只要有一个不被选中 那么全选 就取消选中  
        如果有的选项全部被选中 那么全选 也被选中  




 -->
  <script>
    //1 获取全选按钮  
    var allbtn = document.querySelector('input');
    //2 获取所有的选项按钮 
    var inputs = [...document.getElementsByClassName('item')];
    // 伪数组不支持高级方法 

    // 3.获取全选按钮的状态  然后挨个给到每个选项  
    // 4.当一点击 全选按钮  第三步执行  
    allbtn.onclick = function(){
        var state = allbtn.checked;
        // alert(state);
        inputs.forEach(function(item){
            //item 就是每个input 选项  
            // 给每个input选项的checked属性 赋值 
            // alert(item.checked)
            item.checked = state
        });
    }


    // 当每个选项的状态都是 true 全选 的checked 也是true 
    // 如果有一个不是 那么全选的状态就是false 
     

    //思路
    // 判断每个选项的状态  
    // 如果选项为true的 数量等于 = 选项卡的总数量 说明都被选中了 


    // 1.给每个选项卡一个点击效果  
    
    inputs.forEach(function(item){
            item.onclick = handle1; //只要点击某个选项 handle方法被执行
    });
// 2.然后计数 
    // function handle(){
    //     var count = 0;  //初始化一个计数器  
    //     inputs.forEach(function(item){ // 统计被选中的个数 
    //         if(item.checked){ // 如果被选中 
    //             count++ // 计数器+1
    //         }
    //     });
    //     allbtn.checked = inputs.length == count 
    //     //如果 个数等于所有选项的个数  返回true 
    //     // true 给到全选按钮的checked 
    // }

    // every 高级方法  
    // 如果都是true  那么最后的结果就是true

    function handle1(){
        // alert(123)
        var state = inputs.every(function(item){
            return item.checked == true;
        })
        // console.log(state);
        allbtn.checked = state
        // 如果所有的都是true 最后结果就是true 
        
    }
  </script>

</body>

</html>